<template>
  <div class="h100 plr15">
    <!-- 头部 -->
    <div class="title flex-between">
      <ul class="flex nav">
        <li
          v-for="(item, index) in navs"
          v-cloak
          :key="index"
          :class="{
            'no-select': true,
            'on': navActive === index
          }"
          @click="handleNav(index)"
        >
          {{ item.name }}
        </li>
      </ul>
      <div class="flex-middle">
        <!-- 日期选项 -->
        <template v-if="navActive === 1">
          <el-date-picker
            v-if="tabId !== '6'"
            v-model="date"
            :type="dateType"
            :value-format="formatType"
            placeholder="开始日期"
            :disabled-date="handleDisabledDate"
          />
          <DatePicker
            v-else
            :range="date"
            @update-range="handleUpdateRange" />
        </template>
        <Tab
          :data="tabData"
          class="ml15"
        />
      </div>
    </div>
    <!-- 图表 -->
    <div class="eb-h">
      <EChartBase :options="optionsCompare" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, watch, reactive, ref } from 'vue'
import Tab from '@/components/Tab/index.vue'
import EChartBase from '@/components/Echarts/base.vue'
import DatePicker from '@/components/DatePicker/index.vue'
import { getBottomBarCompareOptions } from './bottomBarCompare'
const navActive = ref(0)
const navs = reactive([
  { name: '发电量对比'},
  { name: '能源趋势'},
])
const handleNav = (index: number) => {
  navActive.value = index
}
const tabId = ref('5')
const dateType = ref('')
const formatType = ref('')
const date = ref('')
const handleUpdateRange = (str: string) => {
  // console.log('-------', str)
  date.value = str
}
const tabData = computed(() => {
  if (navActive.value === 0) return [
    { text: '季度', id: '1' },
    { text: '月', id: '2' },
  ]
  return [
    { text: '时', id: '3' },
    { text: '日', id: '4' },
    { text: '月', id: '5' },
    { text: '年', id: '6' },
  ]
})
watch([tabId], () => {
  switch (tabId.value) {
  case '3':
    dateType.value = 'date'
    formatType.value = 'YYYY-MM-dd'
    date.value = ''
    break
  case '4':
    dateType.value = 'month'
    formatType.value = 'YYYY-MM'
    date.value = ''
    break
  case '5':
    dateType.value = 'year'
    formatType.value = 'YYYY'
    date.value = ''
    break
  case '6':
    date.value = ''
    break
  }
})
const handleDisabledDate = (d: Date) => {
  const now = new Date()
  if (d.getTime() - now.getTime() > 0) return true
}

const optionsCompare = reactive(
  getBottomBarCompareOptions({
    ledendData: ['2021', '2022', '2023'],
    xData: ['第一季度', '第二季度'],
    yData1: [1, 2, 3],
    yData2: [1, 2, 3],
    yData3: [1, 2, 3]
  })
)
</script>

<style lang="scss" scoped>
.nav {
  li {
    line-height: 4.5rem;
    padding: .8rem;
    width: 9rem;
    text-align: center;
    cursor: pointer;
    &.on {
      background: url(@imgs/company_nav.svg) center center no-repeat;
      background-size: 100%;
    }
    & + li {
      margin-left: 1.5rem;
    }
  }
}
.eb-h {
  height: calc(100% - 6.1rem);
}
</style>
